<template>
  <div class="d-flex ai-center text-left" @click="handleClick">
    <div class="img">
      <el-popover v-if="item.coverPicUrl" placement="left" trigger="hover">
        <div slot="reference">
          <el-image :src="item.coverPicUrl" :alt="item.coverPicUrl" style="height: 90px;width: 90px" />
        </div>
        <el-image :src="item.coverPicUrl" style="height: 500px;width: 500px" />
      </el-popover>

      <div v-else class="full no-img-box d-flex">
        <img src="@/assets/images/no.png" style="height: 90px;width: 90px" />
      </div>

      <div class="imgType" :style="{ backgroundColor: item.operated ? '#999999' : '#E5AC4E' }">
        {{ item.operated ? "已读" : "未读" }}
      </div>
    </div>
    <div class="body">
      <el-button type="text" class="ellipsis">{{ item.title }}</el-button>
      <div>{{ details }}</div>
      <div>
        <span v-if="item.saleType === 'SALES'" class="text-red bold">{{ item.price / 10000 }}万</span>
        {{ unitPriceStr }}
      </div>
    </div>
  </div>
</template>

<script>
import { menuHandler } from "@/handler/menuHandler";
import { HOUSE_OWER_PHONE } from "@/config/menuId";
import { getMemberPower } from "@/api/user";
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
    houseHref: {
      type: String,
      default: "",
    },
  },
  computed: {
    details() {
      const { item } = this;
      let shi = item.shi > 0 ? item.shi + "室" : "";
      let ting = item.ting > 0 ? "/" + item.ting + "厅" : "";
      let wei = item.wei > 0 ? "/" + item.wei + "卫" : "";
      let buildingSize = item.buildingSize > 0 ? "/" + item.buildingSize + "平" : "";
      // let type = item.saleType === "SALES" ? "【二手】" : "【出租】";
      let hdResblockName = "/" + (item.hdResblockName || item.communityName || '');

      return shi + ting + wei + buildingSize + hdResblockName;
    },
    unitPriceStr() {
      const { item } = this;
      if (item.saleType === "SALES") {
        return `${item.unitPriceStr}元/平`;
      } else {
        if (item.unitPriceStr && item.unitPriceStr.indexOf("元/月") > -1) {
          return item.unitPriceStr;
        } else {
          return `${item.unitPriceStr}元/月`;
        }
      }
    },
  },
  methods: {
    handleClick() {
      menuHandler
        .call(this, HOUSE_OWER_PHONE)
        .then(() => {
          getMemberPower({
            menuId: HOUSE_OWER_PHONE,
          });

          window.open(this.houseHref, "_blank");
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.img {
  min-width: 90px;
  width: 90px;
  height: 90px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.imgType {
  position: absolute;
  padding: 0 2px;
  left: 2px;
  top: 2px;
  font-size: 8px;
  height: 14px;
  color: #ffffff;
  text-align: center;
  line-height: 14px;
  border-radius: 1px;
}

.body {
  min-width: 200px;
  margin-left: 26px;
}
</style>
